<!--处置原则  -->
<template>
  <el-card class="box-card" style="margin-top: 20px; padding-bottom: 20px">
    <div slot="header" class="clearfix">
      <span>处置原则</span>
    </div>
    <el-col :span="8" style="margin-left: 37px">
      <div style="width: 1320px; display: flex; flex-wrap: wrap">
        <div
          v-for="(content, contentIndex) in contents"
          :key="contentIndex"
          style="
            display: flex;
            flex-wrap: wrap;
            width: 494px;
            margin-left: 6px;
            margin-top: 10px;
          "
        >
          <div style="line-height: 34px">{{ contentIndex + 1 }}.</div>

          <el-popover placement="top-start" width="300" trigger="click">
            <el-input
              class="borderNone"
              type="textarea"
              autosize
              size="medium"
              resize="none"
              v-model="content.value"
              @input="updateDisposal(contentIndex)"
            ></el-input>
            <template slot="reference">
              <el-input
              :disabled="titleDisabled"
                placeholder="请输入处置原则"
                v-model="content.value"
                @input="updateDisposal(contentIndex)"
                style="margin-left: 13px; width: 350px"
              ></el-input>
            </template>
          </el-popover>
          <div style="margin-left: 1%">
            <el-button
              v-if="contentIndex === contents.length - 1"
              type="primary"
              plain
              @click="addDisposal(contentIndex)"
              >+</el-button
            >
          </div>
          <div style="margin-left: 1%">
            <el-button
              v-if="contentIndex === contents.length - 1"
              type="danger"
              plain
              @click="removeDisposal(contentIndex)"
              >-</el-button
            >
          </div>
        </div>
      </div>
    </el-col>
  </el-card>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  getLists,
  insertData,
  deletelist,
  ModifierList,
} from "../../../api/Genericmethods/GeneralQuery";
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: {},
  props: ["basicInformationForm","parentPlanName","title"],
  data() {
    return {
      // 处置步骤
      contents: [],
    };
  },
  // 计算属性 类似于data概念
 computed: {
     // 标题
    titleDisabled() {
      return this.title === "详情"; // 判断标题是否为"详情"
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    chuzhi() {
      getLists("EmergPlan_SpecRspMrs_DealTenet")
        .then((data) => {
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.PlanName === this.parentPlanName.PlanName) {
              for (let i = 1; i <= 10; i++) {
                const key = `TenetContent${i}`;
                const value = element[key];
                if (value !== null) {
                  this.contents.push({ value: value });
                }
              }
              if (this.contents.length === 0) {
                this.contents.push({ value: "" });
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getFormData() {
      return {
        Disposalsteps: this.contents,
      };
    },
    // 处置原则和要求措施步骤输入框内容
    updateDisposal(innerIndex) {
      const content = this.contents[innerIndex];
    },
    // 措施步骤输入框内容+
    addDisposal(innerIndex) {
      //   this.Disposalstepslist[contentIndex].contents.splice(
      //     innerIndex + 1,
      //     0,
      //     newContent
      //   );
      const newContent = { value: "" };
      const contents = this.contents;

      // 检查当前内容数量是否已经达到上限
      if (contents.length >= 10) {
        this.$message.error("内容数量已达到上限");
        return;
      }

      contents.splice(innerIndex + 1, 0, newContent);
    },
    // 措施步骤输入框内容-
    removeDisposal(innerIndex) {
      if (this.contents.length > 1) {
        this.contents.splice(innerIndex, 1);
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
     if (this.title !="添加") {
       this.chuzhi();
    }else{
      this.contents.push({ value: "" },{ value: "" });
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.borderNone ::v-deep .el-textarea__inner {
  border: none;
  height: 100%;
}
</style>
